{include file="public/header"}
<style scoped>
    .el-select-dropdown {
      padding: 0;
    }
    .card-box {
         width: 500px;
        padding:30px 12px 0 12px;
        border-radius: 4px;
        margin: 0px 12px ;
        height: 80px;            
        border: 1px solid #D5DAE3;
        display: block;
        unicode-bidi: isolate;
        font-size: 14px;
        font-weight: 400;
        color: #76879d;
    }

    .card-box:hover {
        border:1px solid #409EFF;
    }

    .card-font {
         line-height: 45px;
        font-size: 18px;
        font-weight: 500;
        color: #76879d;
        /* margin-top: 12px; */
    }

    .card-box-item {
        margin: 0 28px;
    }
    .card-span{
        color: #409EFF;
    }
    .dateil {
        display: flex;
        padding: 0px 20px 10px 0px;
        font-size: 16px;
        font-weight: 700;
    }
    .color-box{
        display: flex;
    }
    </style>
 {include file="public/style"}
        <el-card style="width: 90%;" >   
            <el-breadcrumb separator="/">
                <el-breadcrumb separator="/">
                    <el-page-header @back="goBack"  content="采购单列表"></el-page-header>
                </el-breadcrumb>        
            </el-breadcrumb>
        </el-card>
        <br>      
      
        <el-card style="width: 90%;"  shadow="always" > 
            <el-form :inline="true" :model="createForm" size="small"  >     
                <el-descriptions title="采购单基本信息:" class="margin-top" :column="9" direction="vertical" border>                 
                    <template slot="extra">
                          <el-button type="primary" size="small" @click="searchSubmits">保存</el-button>
                    </template>  
                    <el-descriptions-item label="采购单号">{{createForm.purchase_no}}</el-descriptions-item>
                    <el-descriptions-item label="下单时间">{{createForm.createtime}}</el-descriptions-item>
                    <el-descriptions-item label="到货仓库">{{createForm.stroage_name}}</el-descriptions-item>
                    <el-descriptions-item label="供应商" >{{createForm.company_name}}</el-descriptions-item>
                    <el-descriptions-item label="采购单状态" >{{createForm.status_name}}</el-descriptions-item>
                    <el-descriptions-item label="采购员">{{createForm.buyer_name}}</el-descriptions-item>
                    <el-descriptions-item label="总金额" >{{createForm.company_name}}</el-descriptions-item>
                    <el-descriptions-item label="采购单件数" >{{createForm.quantity}}</el-descriptions-item>
                    <el-descriptions-item label="1688单号">
                          <el-input  v-model="createForm.order_num" type="text"  style="width: 200px;"   placeholder="请输入1688单号"  ></el-input>                    
                    </el-descriptions-item>
                    <el-descriptions-item label="运费" >                    
                        <el-input  v-model="createForm.shipprice" type="number"   min="0" style="width: 200px;"   placeholder="请输入内容"  @input="handleInput"></el-input>                    
                    </el-descriptions-item>
                    <el-descriptions-item label="备注" >
                         <el-input type="textarea"  placeholder="请输入备注" style="width: 50%;" v-model="createForm.notes"></el-input>
                    </el-descriptions-item>    
                </el-descriptions>
             </el-form>   
        </el-card>
       

         <el-card style="width: 90%; margin-top: 25px;"  shadow="always" > 
              <div class="color-box">
                 <div class="dateil">采购单列表信息:</div>   <div class="dateil">采购单列表信息:</div>
              </div>              
                <el-table :data="tablelist"  tooltip-effect="light"  style="width: 100%;margin-bottom: 20px;"   row-key="id"  border >                        
                    <el-table-column   prop="purchase_no" label="产品图片" min-width="100"> 
                         <template v-slot="{row}">
                            <el-image :preview-teleported="true" :z-index="999999" :src="row.img" style="width:100;height:50px" :preview-src-list="[row.img]"    referrerpolicy="no-referrer" /></el-image>
                        </template>
                    </el-table-column>  
                    <el-table-column   prop="localsku" label="本地loclsku" min-width="100">
                         <template v-slot="{row}">
                             <el-link type="primary"  :href="row.product_link" target="_blank">  {{row.localsku}} </el-link>
                        </template>
                   </el-table-column> 
                    <el-table-column   prop="company_name" label="供应商" min-width="80"></el-table-column>  
                    <el-table-column   prop="count" label="采购数量" min-width="80"></el-table-column>  
                    <el-table-column   prop="inventory_quantity" label="入库件数" min-width="80"></el-table-column> 
                    <el-table-column   prop="stock" label="缺货件数" min-width="80"></el-table-column>   
                    <el-table-column   prop="actualPrice" label="采购价格" min-width="80" ></el-table-column>            
                    <el-table-column   prop="nickname" label="采购人" min-width="80" ></el-table-column>        
                </el-table>
           
       </el-card>
    </div>      
    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {                   
                    searchForm:{
                        id: {$id}        
                    },
                    tablelist:[],
                    list:[],
                    id: {$id} ,     
                    createForm:{
                        type:2,     
                        id: {$id}           
                    },
                    num:'',//获取id 是否是数字
                    iscreateVisible: false,//判断过来是添加还是数字
                }
            },
            mounted(){           
                 this.getlist()
            },
            methods: {        
                  //返回上一个页面
                goBack() {              
                    window.location.href = '/admin/purchase/index';
                },            
                
                 async getlist() {
                    let loading = this.$loading({
                          lock: true,
                          text: '数据加载中···',
                          spinner: 'el-icon-loading',
                          background: 'rgba(0, 0, 0, 0.7)'
                    });
                    const res = await axios.post('/admin/purchase/purchase_detail', {params: this.searchForm})
                    loading.close()
                    if (res.status !== 1) {
                        return this.$message.error(res.info);
                    }
                    this.createForm = res.info.list  
                    this.tablelist = res.info.detail_list  
                 },
                 handleInput(value) {
                    // 确保输入是数字且不小于0
                    if (value < 0) {
                        this.createForm.shipprice = '0.00';
                    } else if (isNaN(value)) {
                        this.createForm.shipprice= '0.00';
                    } else {
                        this.createForm.shipprice = Number(value);
                    }
                },
                //保存
                async searchSubmits(){
                     let loading = this.$loading({
                          lock: true,
                          text: '数据处理中···',
                          spinner: 'el-icon-loading',
                          background: 'rgba(0, 0, 0, 0.7)'
                    });
                    this.createForm.type =2
                    const res = await axios.post('/admin/purchase/purchase_save_num', {params: this.createForm})
                    loading.close()
                    if (res.status !== 1) {
                            return this.$message.error(res.info);             
                    }                    
                    this.$message.success('修改成功');                   
                    this.getlist()
                }            
            }
        })
     </script>
</body>    
 </html>
      